<template>
  <div class="home">
    <div class="bg">
    <img src="../assets/bg.png" >
    </div>
    <div style="z-index: 2;position: relative;">
      <HedarNav v-bind:fData="data1"></HedarNav>
      <div class="nav-height"></div>
      <router-view></router-view>
      <Sidebar></Sidebar>
      <Footer></Footer>
      <Login></Login>
    </div>
  </div>
</template>

<script>
import HedarNav from "../components/hedar_nav.vue"
import Footer from "../components/footer.vue"
import Sidebar from "../components/sidebar.vue"
import Login from "../components/Login.vue"
export default {
  components:{
    HedarNav,
    Footer,
    Sidebar,
    Login
  },
  data () {
    return {
      currentSort: 0,
      data1:'78'
    }
  },
  methods: {
    navto: function (e) {
      console.log(e)
      this.currentSort = e
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .nav-height{
    height: 70px;
  }
  .home{
    overflow: hidden;
    position: relative;
    background-color: #12151B;
    min-height: 100vh;
  }
  .bg{
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -960px;
    background-image: url(../assets/bg.png);
    background-position:center top ;
    background-repeat:no-repeat;
    background-size: 100% 100%;
    width: 1920px;
    height: 1179px;
  }
</style>
